<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<style>
    body{
        background: url(images/one.jpg) no-repeat;
        padding: 0;
        margin: 0;
    }
    #menu ul {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #menu>li {
        position: relative;
        width: 100px;
        display: inline-block;
        width: 11.5%;
        text-align: center;
    }

    #menu li ul {
        position: absolute;
        top: 100%;
        left: 0;
        height: auto;
        background-color: white;
        text-align: center;
        line-height: 50px;
        list-style: none;
    }

    li {
        font-size: 14px;
        font-weight: bold;
        color: #888
    }
    #menu>li:hover{
        border-top:4px solid red;
        color:red;
    }
    #menu li div{
        width:0px;
        height:0px;
        border:5px solid transparent;
        border-top:5px solid #ccc;
        position: relative;
        left:115px;
        top:-13px;
        /* display: block; */
    }
    #menu>li:hover div{
        color:red;
        border:5px solid transparent;
        border-bottom:5px solid red;
    }
    #pp{
        width:800px;
        height: 800px;
        background-color: #000;
        margin: 0 auto;
    }
</style>

</head>

<body>
<ul id="menu">
    <li>苏州<div></div></li>
    <li>首页<div></div></li>
    <li>新房<div></div></li>
    <li id="li">
        二手房<div></div>
        <ul>
            <li>全部资源</li>
            <li>地图找房</li>
            <li>房价走势</li>
            <li>全城小区</li>
            <li>服务介绍</li>
        </ul>
    </li>>
    <li>卖房<div></div></li>
    <li>房市头条<div></div></li>
    <li id="one">多多速成班<div></div></li>
    <li>手机版<div></div></li>
</ul>
<div id = "pp">

</div>
<script>
    window.onload = function menu() {
        var silg = document.getElementById("menu");

        var ul = silg.getElementsByTagName("ul")
        for (var i = 0; i < ul.length; i++) {
            ul[i].style.display = "none";
        }
        var li = silg.getElementsByTagName("li");
        for (var i = 0; i < li.length; i++) {
            li[i].onmouseover = function () {
                var nodes = this.getElementsByTagName("ul");
                for (var j = 0; j < nodes.length; j++) {
                    nodes[j].style.display = "block";
                }
            };
            li[i].onmouseout = function () {
                var nodes = this.getElementsByTagName("ul");
                for (var j = 0; j < nodes.length; j++) {
                    nodes[j].style.display = "none";
                }
            }
        }
    }
    //  menu();
</script>

</body>
</html>